@extends('backend.layouts.base')
@section('title', '安装模版')
@section('content')
{{--<link rel="stylesheet" href="{{resource_get('plugins/plugins-market/assets/css/index.css')}}">--}}
<style>
    .base_set{
        background: #fff;
        margin: 10px 10px 0 20px;
    }
    .vue-main-title{
        margin-left: 20px;
        padding-top: 10px;
    }
    .detailRoute{
        padding:0 10px;
        color: #333333;
        display: block;
    }
    .cardBox{
        display: flex;
        flex-wrap: wrap;
    }
    .box{
        width: 100%;
        background: #fff;
        margin:0 10px 10px 15px;
        display: flex;
        padding: 20px;
        border-radius: 10px;
        font-weight: normal;
    }
    .boxDetail{
        width: 100%;
        background: #fff;
        margin: 20px 10px;
        display: flex;
        padding: 20px;
        border-radius: 10px;
    }
    .box img{
        margin-right: 22px;
    }
    .box .cardDetail{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
    }
    .box .cardDetail .verification{
        color: #202020;
        font-size: 22px;
    }
    .buttonLeft{
        display: flex;
        justify-content: space-between;
    }
    .box .grant{
        background: #ec544a;
        color: #fff;
        border-radius: 4px;
        border-color: #ec544a;
    }
    .box .grant:hover{
        background: #ec544a;
        color: #fff;
        border-color: #ec544a;
    }
    .box .grant:active{
        background: #fcd7d3;
        color: #ec544a;
        border-color: #fcd7d3;
    }
    .activeGrant{
        color: #ec544a;
        background: #fcd7d3;
        border-radius: 4px;
        border-color: #fcd7d3;
    }
    .box .activeGrant:hover{
        background: #fcd7d3;
        color: #ec544a;
        border-color: #fcd7d3;
    }
    .box .activeGrant:active{
        background: #fcd7d3;
        color: #ec544a;
        border-color: #fcd7d3;
    }
    .box .install{
        background: #29ba9c;
        color: #fff;
        border-radius: 4px;
    }
    .activeInstall{
        background-color: #c6eee2;
        color: #29ba9c;
        border-radius: 4px;
        border-color: #c6eee2;
    }
    .box .btnGoback {
        /* padding: 8px 20px; */
        height: 42px;
        width: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #29ba9c;
        color: #ffffff;
        border-radius: 4px;
        cursor: pointer;
    }
    .categoryDes{
        color:#595959;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 16px;
    }
    .detailCard{
        background: #fff;
        margin: 20px 10px 20px 20px;
        }
    .detailCardBox{
        display: flex;
        justify-content: center;
        margin-top: 138px;
        padding-bottom: 138px;
        color: #595959;
        font-size: 16px;
    }
    .el-button--whiteBackground {
        background: #ec544a !important;
        color: #fff !important;
        border-color: #ec544a !important;
    }
    .categoryDes-card {
        display: flex;
        justify-content: space-between;
        color: #595959;
    }

    .buttonLeft .el-button {
        height: 42px;
        width: 96px;
    }
</style>
<div class="all">
    <div id="app" v-cloak>
        <el-form ref="form"  label-width="15%">
            <div class="base_set">
                <div style="margin:10px;background:#fff;padding-top: 10px;">
                    <div class="vue-main-title">
                        <!-- <div class="vue-main-title-left"></div> -->
                        <div class="vue-main-title-content" style="font-size: 16px;font-weight: normal;"><span @click="btnGoback" style="cursor: pointer;">模版市场</span> > 模版详情介绍</div>
                    </div>
                </div>
                <div class="cardBox">
                    <div class="box" v-for="(item,index) in boxData" :key="index">
                        <img :src="item.imageUrl" alt="" style="width: 170px;height: 170px;">
                        <div class="cardDetail">
                            <div style="display: flex;justify-content: space-between;">
                                <div>
                                    <span class="verification">[[item.name]]</span>
                                    {{--<span class="tip" style="display: flex;" v-if="item.empower == 'un_auth' && item.version_status == 'installed'">涉嫌盗版使用，请卸载或联系客服</span>--}}
                                </div>
                            </div>
                            <div  class="categoryDes-card" >
                                <span class="categoryDes">分类: [[item.theme_category_name]]</span>
                                <span style="font-size: 14px;">版本号：[[item.theme_version]]</span>
                            </div>
                            <span class="categoryDes">描述: [[item.introduction]]</span>
                            <div class="buttonLeft">
                                <div>
                                    <!-- empower == 验证授权 -->
                                    <el-button type="whiteBackground" class="grant" v-if="item.empower == 'auth'">已授权</el-button>
                                    <el-button type="whiteBackground" class="activeGrant" v-if="item.empower == 'un_auth'">未授权</el-button>

                                    <!-- version_status == 安装、升级、未安装 -->
                                    <el-button class="install" v-if="item.version_status == 'un_install'">安装</el-button>
                                    <el-button class="install" v-if="item.version_status == 'new'">可升级</el-button>
                                    <!-- <el-button class="install" v-if="item.version_status == 'un_auth'">安装</el-button> -->
                                    <el-button class="activeInstall" v-if="item.version_status == 'installed'">已安装</el-button>
                                </div>
                                <span class="btnGoback" @click="btnGoback">返回模版市场</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detailCard">
                <div class="vue-main-title">
                    <div class="vue-main-title-left" style="height: 24px;margin-top: 1px;"></div>
                    <div class="vue-main-title-content" style="font-size: 20px;font-weight: normal;">详情介绍</div>
                </div>
                <div class="detailCardBox" v-if="boxData.length > 0">
                    <div v-html="boxData[0].content"></div>
                    <div v-if="!boxData[0].content">暂无详情，请联系客服咨询</div>
                </div>
            </div>
        </el-form>

    </div>
</div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'market',
            data() {
                return {
                    id:0,
                    boxData:[],
                    detailData:{}
                }
            },
            mounted() {
                this.id = getParam("id");
                this.getData();
            },
            methods: {
                getData() {
                    let json = {};
                    if(this.id){
                        json['id'] = this.id;
                    }
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! absolute_admin_url('theme.market.getDetail') !!}',json).then(function (response) {
                            if (response.data.result){
                                this.detailData = response.data.data;
                                this.boxData.push(this.detailData)
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        }
                    );
                },
                btnGoback(){
                    let link =`{!! absolute_admin_url('theme.market.index') !!}`
                    window.location.href = link;
                },
                
            },
        })
    </script>
@endsection